<template>
  <div>
    <el-table :data="infoShowArray">

      <el-table-column prop="name" label="线路名称" align="center" width="200">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit">{{ scope.row.name }}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="telephone" label="途径" align="center" width="200">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit">{{ scope.row.road }}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.telephone"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="地址" align="center" width="200">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit">{{ scope.row.address }}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.address"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="电话" align="center" width="200">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit">{{ scope.row.telephone }}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.telephone"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleSave(scope.$index, scope.row)">保存</el-button>
          <el-button type="text" size="small" @click="handleTopping(scope.$index, scope.row)">置顶</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-dialog width="38%" title="添加信息" :visible.sync="innerVisible" append-to-body>
      <el-form :model="form">
        <el-form-item label="线路名称:" :label-width="formLabelWidth">
          <el-input v-model="form.name" style="width:300px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="途径:" :label-width="formLabelWidth">
          <el-input v-model="form.road" style="width:300px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址:" :label-width="formLabelWidth">
          <el-input v-model="form.address" style="width:300px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话:" :label-width="formLabelWidth">
          <el-input v-model="form.telephone" style="width:300px" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm()">确认添加</el-button>
      </div>
    </el-dialog>

    <div slot="footer" class="dialog-footer" style="flex-direction: row">

      <span class="block" v-show='infoShow'>
        <el-pagination class="pagnation" layout="prev, pager, next" :total="infoLength" @current-change="changeInfoPage"
          :current-page.sync="currentInfoPage" :page-size='5'>
        </el-pagination>
      </span>

      <span>
        <el-input placeholder="请输入关键字搜索" v-model="search" class="search" autocomplete="off"></el-input>
        <el-button type="primary" @click="lineSearch()">搜索</el-button>
        <el-button @click="lineCancel()">关闭搜索</el-button>
      </span>

      <span>
        <el-button type="primary" style="margin-left: 120px;" @click="addInfo()">添加物流线路</el-button>
      </span>


    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.withCredentials = true;
export default {
  name: "UserManager",
  data() {
    return {
      form: {
        name: '',
        road: '',
        address: '',
        telephone: ''
      },
      innerVisible: false,
      infoBase: [],
      formLabelWidth: '90px',
      currentInfoPage: 1,
      infoLength: 0,
      infoShow: false,
      infoShowArray: [],
      search: ''
    }
  },
  methods: {
    async showInfo() {
      this.infoBase = await this.$axios.get("line");
      this.infoPagnation(1)
      this.currentInfoPage = 1
      if (this.infoBase.length != 0) {
        this.infoShow = true
      } else {
        this.infoShow = false
      }
      this.infoLength = this.infoBase.length
    },
    addInfo() {
      this.innerVisible = true
    },
    infoPagnation(e) {
      this.infoShowArray = []
      if (this.infoBase.length >= 5 * e) {
        for (let i = (e - 1) * 5; i < e * 5; i++) {
          this.infoShowArray.push(this.infoBase[i])
        }
      } else {
        for (let i = (e - 1) * 5; i < this.infoBase.length; i++) {
          this.infoShowArray.push(this.infoBase[i])
        }
      }
    },
    async confirm() {
      this.innerVisible = false;
      const result = await this.$axios.post("/addLine", {
        name: `${this.form.name}`,
        road: `${this.form.road}`,
        address: `${this.form.address}`,
        telephone: `${this.form.telephone}`
      });
      if (result.code == 200) {
        this.$message.success('添加成功')
        if (this.infoShowArray.length < 5) {
          this.infoShowArray.push(this.form)
        }
        this.infoBase.push(this.form)
        this.infoLength = this.infoBase.length
        this.form = {
          name: '',
          road: '',
          address: '',
          telephone: ''
        }
      } else {
        this.$message.error('添加失败')
      }
    },
    changeInfoPage(e) {
      this.infoPagnation(e)
    },
    handleEdit(index) {
      this.$set(this.infoShowArray[index], 'isEdit', true)
    },
    async handleSave(index, row) {
      if (this.infoShowArray[index].isEdit) {
        this.$set(this.infoShowArray[index], 'isEdit', false)
        row.index = index + (this.currentInfoPage - 1) * 5 + 1
        console.log(row)
        await this.$axios.post('/alterLine', row)
        this.$message.success('修改成功')
      }
    },
    async handleTopping(index, row) {
      row.index = index + (this.currentInfoPage - 1) * 5 + 1
      await this.$axios.post('/topLine', row)
      // this.infoBase = await this.$axios.get("line");
      this.infoBase.splice(row.index, 1)
      delete row.index
      this.infoBase.unshift(row)
      this.changeInfoPage(this.currentInfoPage)
      this.$message.success('置顶成功')
    },
    async lineSearch() {
      if (this.search) {
        const res = await this.$axios.post('/searchLine', { key: this.search })
        this.infoBase = res
        this.infoPagnation(1)
        this.currentInfoPage = 1
        if (this.infoBase.length != 0) {
          this.infoShow = true
        } else {
          this.infoShow = false
        }
        this.infoLength = this.infoBase.length
      }
    },
    lineCancel() {
      this.showInfo();
      this.search = '';
    },
    handleDelete(index, row) {
      this.$confirm(`确定删除${row.name}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
      }).then(async () => {
        const item = index + (this.currentInfoPage - 1) * 5 + 1
        await this.$axios.delete('/deleteLine', { params: { deleteIndex: row.id } })
        this.$message.success('删除成功')
        this.infoShowArray.splice(index, 1);
        this.infoBase.splice(item, 1);
        this.infoLength = this.infoBase.length
        if (this.infoShowArray.length == 0 && this.infoBase != []) {
          this.infoPagnation(this.currentInfoPage - 1)
        }
      });
    }
  },
  mounted() {
    this.showInfo()
  }
}
</script>

<style scoped>
.pagnation {
  float: left;
  margin-top: 65px;
  margin-left: 120px;
}

.search {
  width: 180px;
  margin-right: 10px
}
</style>